.topbar {
  height: 42px;
  line-height: 42px;
  background-color: #000;
  color: #fff;
  font-size: 15px;
  text-align: center;
}
.bg {
  width: 100%;
  height: 1200px;
  background: linear-gradient(189.16deg, #390fc7 13.57%, #28234d 98.38%);
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.bg .ball1 {
  width: 500px;
  height: 500px;
  background-color: pink;
  position: absolute;
  top: 250px;
  left: 200px;
  background: linear-gradient(rgba(186, 117, 255, 0.49) 26.56%, #3913b8 100%);
  animation: move 30s infinite alternate;
}
.bg .ball2 {
  width: 500px;
  height: 500px;
  background-color: pink;
  position: absolute;
  top: 250px;
  left: 200px;
  background: linear-gradient(rgba(47, 184, 255, 0.42) 31.77%, #9eecd9 100%);
  animation: move 25s infinite alternate;
}
@keyframes move {
  0% {
    transform: translate(-200px, 0px) rotate(-90deg);
    border-radius: 51% 49% 58% 42% / 34% 78% 22% 66%;
  }
  100% {
    transform: translate(400px, 100px) rotate(-120deg);
    border-radius: 22% 78% 73% 27% / 67% 31% 69% 33%;
  }
}
.header {
  max-width: 1234px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
}
.header .logo img {
  width: 44px;
  height: 44px;
  margin: 0;
}
.nav {
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: 26px;
}
.nav a button {
  display: flex;
  padding: 10px 20px;
  background: none;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.nav a button:hover {
  background: #ffffff33;
  box-shadow: #1f2f4740 0px 20px 40px, #0000001a 0px 1px 5px, #ffffff66 0px 0px 0px 0.5px inset;
}
.nav a button img {
  width: 24px;
  height: 24px;
}
.nav a button p {
  font-size: 15px;
  color: #fff;
  margin-left: 10px;
}
.mobile-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  width: 44px;
  height: 44px;
  background: rgba(15, 14, 71, 0.3);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset;
  backdrop-filter: blur(40px);
  border-radius: 50%;
}
@media screen and (max-width: 1024px) {
  .nav {
    grid-template-columns: repeat(6, auto);
  }
  .nav a:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .nav {
    grid-template-columns: repeat(5, auto);
  }
  .nav a:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .nav {
    grid-template-columns: repeat(4, auto);
  }
  .nav a:nth-child(2) {
    display: none;
  }
}
@media screen and (max-width: 550px) {
  .nav {
    display: none;
  }
  .header {
    padding-top: 20px;
  }
  .mobile-nav {
    display: flex;
  }
}
.course {
  max-width: 1234px;
  margin: 0 auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 380px auto;
  align-items: end;
  gap: 80px;
  margin-top: 60px;
}
.course-l {
  color: #fff;
}
.course-l .time {
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.7);
}
.course-l h2 {
  font-size: 40px;
  line-height: 48px;
  margin: 20px 0;
}
.course-l p {
  font-size: 17px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
}
.course-r {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.icon ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
}
.icon ul li {
  list-style: none;
}
.icon ul li img {
  width: 44px;
  height: 44px;
}
.search {
  position: relative;
}
.search input {
  border: 0;
  outline: 0;
  width: 204px;
  height: 44px;
  padding: 10px 42px;
  border-radius: 30px;
  background: linear-gradient(rgba(99, 106, 150, 0.8) 0%, rgba(182, 186, 214, 0.6) 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px, rgba(255, 255, 255, 0.3) 0px 0px 0px 0.5px inset;
  color: #fff;
}
.search img {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
}
.search input:focus {
  box-shadow: rgba(47, 184, 255, 0.3) 0px 10px 40px, #2fb8ff 0px 0px 0px 1px inset;
  background: linear-gradient(rgba(24, 32, 79, 0.4) 0%, rgba(24, 32, 79, 0.25) 100%);
}
@media screen and (max-width: 1280px) {
  .course {
    grid-template-columns: 1fr;
  }
  .course-l {
    max-width: 380px;
  }
}
@media screen and (max-width: 1024px) {
  .course-l {
    max-width: 380px;
    margin: auto;
    text-align: center;
  }
}
@media screen and (max-width: 700px) {
  .course-r {
    display: grid;
    gap: 20px;
    justify-content: center;
    justify-items: center;
  }
}
.course-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  max-width: 1254px;
  margin: 40px auto 0px;
  padding: 0px 40px;
}
.course-card .item {
  height: 360px;
  background: pink;
  border-radius: 20px;
  padding: 20px;
  background: linear-gradient(209.21deg, #494ffe 13.57%, #0f1324 98.38%);
  cursor: pointer;
  transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.course-card .item figure {
  position: relative;
  height: 150px;
  text-align: center;
}
.course-card .item figure > img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.course-card .item h3 {
  color: #fff;
  font-size: 24px;
  line-height: 140%;
  text-align: center;
  font-weight: 600;
  margin: 10px 0;
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp-: 3;
  -webkit-box-orient: vertical;
}
.course-card .item p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.course-card .item:hover {
  transform: scale(1.1);
  box-shadow: #0f13244d 0px 20px 40px, #0000000d 0px 1px 3px;
}
.course-card .item:hover figure > img {
  transform: scale(0.9);
}
.course-card .star {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.course-card .item4 {
  background: linear-gradient(209.21deg, #f28885 13.57%, #e94f66 98.38%);
}
.course-card .item figure .icon1,
.course-card .item figure .icon2 {
  width: 32px;
  height: 32px;
  position: absolute;
  right: 0;
  border-radius: 50%;
  overflow: hidden;
}
.course-card .item figure .icon1 {
  top: 0 !important;
}
.course-card .item figure .icon2 {
  top: 42px !important;
}
@media (max-width: 768px) {
  .course-card {
    gap: 20px;
    padding: 0 20px;
  }
}
.story-card {
  max-width: 1234px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  z-index: 999;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 100px;
}
.story-card .top {
  display: grid;
  grid-template-columns: 42px auto;
  gap: 20px;
}
.story-card .top .name {
  font-weight: 500;
  font-size: 20px;
}
.story-card .middle {
  height: 240px;
  background: #a5ceff;
  border-radius: 20px;
  margin: 20px 0;
  text-align: center;
}
.story-card .middle img {
  max-height: 240px;
}
.story-card .desc {
  font-size: 13px;
  line-height: 130%;
  color: #000000b3;
}
.story-card button {
  background: linear-gradient(rgba(24, 32, 79, 0.4) 0%, rgba(24, 32, 79, 0.4) 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px, rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset;
  border-radius: 30px;
  text-transform: uppercase;
  border: 0;
  margin-top: 20px;
  font-size: 13px;
  color: #fff;
  padding: 8px 15px;
}
.story-l {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.story-l-left .top .info {
  font-style: 13px;
}
.story-l-left .top img {
  border-radius: 50%;
}
.story-r-top,
.story-r-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-content: start;
}
.story-r {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.story-r .pic {
  height: 240px;
  background: #000000;
  border-radius: 20px;
  overflow: hidden;
}
.story-r img {
  max-height: 240px;
}
.story-r .toggle {
  display: none;
}
.story-l > div,
.story-r > div {
  border-radius: 20px;
  box-shadow: #0000001a 0px 0px 0px 0.5px inset;
  background-color: #ffffff80;
  backdrop-filter: blur(10px);
  padding: 20px;
}
@media screen and (max-width: 1250px) {
  .story-card {
    grid-template-columns: 1fr;
    max-width: 768px;
  }
}
@media screen and (max-width: 680px) {
  .story-l {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  .story-r .toggle {
    display: grid;
  }
  .story-r .info .top {
    display: none;
  }
  .story-r-top,
  .story-r-bottom {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}
.footer {
  position: relative;
  width: 100%;
  height: 800px;
  background: #1e1357;
  margin-top: 100px;
}
.footer .con {
  overflow: hidden;
  position: absolute;
  top: -300px;
  left: 0;
  width: 100%;
}
.footer svg {
  width: 100%;
}
.bolang {
  position: absolute;
  left: 0;
  top: 150px;
  width: 100%;
  height: 600px;
  background: linear-gradient(#130c3ecc 0%, #1e1357 28%);
  /* 使用svg裁剪盒子 */
  clip-path: url(#wave2);
}
/* 如果超过1400像素，波浪放大 1.5倍 */
@media (min-width: 1400px) {
  .bolang {
    transform: scale(1.5);
  }
}
.footer-con {
  position: absolute;
  top: 200px;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  transform: translate(-50%, -50%);
  width: 660px;
  padding: 0 20px;
}
@media (max-width: 600px) {
  .footer-con {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 400px;
  }
}
.footer-con-left {
  display: grid;
  grid-template-columns: 144px 144px;
  gap: 20px;
}
.footer-con-left .item {
  display: grid;
  grid-template-rows: repeat(5, 44px);
  row-gap: 20px;
}
.footer-con-left .item button {
  display: flex;
  width: 144px;
  height: 44px;
  /* justify-content: center; */
  align-items: center;
  border-radius: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  padding-left: 10px;
  transition: all 0.3s ease-in-out;
}
.footer-con-left .item button:hover {
  background: #ffffff33;
  box-shadow: #1f2f4740 0px 20px 40px, #0000001a 0px 1px 5px, #ffffff66 0px 0px 0px 0.5px inset;
}
.footer-con-left .item button img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.footer-con-left .item a {
  text-decoration: none;
  color: #fff;
}
.footer-con-left .item a p {
  color: #fff;
}
.footer-con-right {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  padding-top: 60px;
}
.footer-con-right p:nth-child(2) {
  margin-top: 20px;
}
.footer-con-right p:nth-child(3) {
  margin: 20px 0;
  font-weight: 500;
}
